<template>
  <div class="tabbar">
    <van-tabbar v-model="data.tabbarActive" route safe-area-inset-bottom active-color="#ee0a24">
      <van-tabbar-item replace icon="wap-home-o" to="/home">首页</van-tabbar-item>
      <van-tabbar-item replace icon="list-switching" to="/category">分类</van-tabbar-item>
      <van-tabbar-item replace icon="shopping-cart-o" :dot="data.dot" :badge="goodsNum" to="/cart">购物车</van-tabbar-item>
      <van-tabbar-item replace icon="manager-o" to="/profile">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>

import { computed, reactive } from 'vue'

let data = reactive({
	tabbarActive: "Home",
	dot: false,
});

const goodsNum = computed(() => {
  return 3
})

</script>

<style lang="less" scoped>
.tabbar{
  position: absolute;
  height: 50px;
  bottom: 0;
  :deep(.--van-tabbar-item-icon-size){
    font-size: 50px;
  }
}
</style>